<!-- <template>
  <div class="search-index">
    <HeadeR></HeadeR>
    <section>
        <div class="search-history" v-if="searchArr.length">
            <h2>
                <i class="iconfont icon-shijian"></i>
                <span>历史搜索</span>
                <span @click="deleteStorage">清空搜索</span>
            </h2>
            <ul>
                <li v-for="(item,index) in searchArr" :key="index" @click="goSearchList">{{item}}</li>
            </ul>
        </div>
        <div v-else>暂无搜索记录...</div>
    </section>
    <TabbeR></TabbeR> 
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
import HeadeR from '@/components/search/HeadeR.vue'
import TabbeR from '@/components/common/TabbaR.vue'
export default {
    data(){
        return{
            searchArr:[]
        }
    },
    components:{
        TabbeR,
        HeadeR,
    },
    created(){
        this.searchArr = JSON.parse( localStorage.getItem('searchList'))  || [];
    },
    methods:{
        deleteStorage(){
            MessageBox({
            title: '提示',
            message: '确定执行此操作?',
            showCancelButton: true
        }).then(res=>{
            if(res === 'confirm'){
                //删除 本地存储
                localStorage.removeItem('searchList');
                this.searchArr = []
            }
        });
        }
    },
    
}
</script>

<style scoped>
.search-index{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
section{
    flex: 1;
    overflow: hidden;
    background-color: #f5f5f5; 
}

.search-history h2{
    position: relative;
    padding: 0.53333rem;
    font-size: 0.48rem;
    font-weight: 400;
}
.search-history h2 i{
    color: #222;
}
.search-history h2 span:last-child{
    position: absolute;
    right: 0.5333rem;
    top: 0;
}
.search-history h2 i{
    color: red;
    padding-right: 0.08rem;
    font-size: 0.48rem;
}
.search-history ul{
    display: flex;
    flex-wrap: wrap;
    padding: 0 0.26666rem;
}
.search-history ul li{
    margin:0.26666rem;
    padding: 0.08rem 0.16rem;
    font-size: 0.37333rem;
    border: 1px solid #ccc;
}
</style> -->



<template>
  <div class="search-index">
    <Header></Header>
    <section>
      <!-- 如果有搜索记录就展示 -->
      <div class="search-history" v-if="searchArr.length">
        <h2>
          <i class="iconfont icon-shijian"></i>
          <span>历史搜索</span>

          <!-- 绑定点击清空 -->
          <span @click="deleteStorage">清空历史记录</span>
        </h2>

        <!-- 遍历所有的数据 -->
        <ul>
          <!-- 点击历史搜索,进入搜索结果页面 -->
          <li
            v-for="(item, index) in searchArr"
            :key="index"
            @click="goSearchList(item)"
          >{{ item }}</li>
        </ul>
      </div>

      <!-- 如果没有所有记录 -->
      <div v-else>暂无搜索记录...</div>
    </section>
 
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "@/components/search/HeadeR.vue";
import Tabbar from "@/components/common/TabbaR.vue";
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      searchArr: [],
    };
  },
  components: {
    Header,
    Tabbar,
  },
  created() {
    this.searchArr = JSON.parse(localStorage.getItem("searchList")) || [];
  },
  methods: {
    // 绑定点击清空列表事件.
    deleteStorage() {
      MessageBox({
        title: "提示",
        message: "确定执行此操作?",
        showCancelButton: true,
      }).then((res) => {
        // console.log(res);

        if (res == "confirm") {
          //删除本地存储
          localStorage.removeItem("searchList");
          //清除数据
          this.searchArr = [];
        }
      });
    },
    //点击历史搜索，进入搜索结果页面
    goSearchList(item) {
      // console.log(item);
      this.$router.push({
        name: "list",
        query: {
          key: item,
        },
      });
    },
  },
};
</script>

<style scoped>
.search-index {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
section {
  flex: 1;
  background-color: #f5f5f5;
  overflow: hidden;
}
.search-history h2 {
  position: relative;
  padding: 0.533333rem;
  font-weight: 400;
  font-size: 0.48rem;
}
.search-history h2 i {
  padding-right: 0.08rem;
  color: red;
  font-size: 0.48rem;
}
.search-history h2 span:last-child {
  position: absolute;
  right: 0.533333rem;
}
.search-history ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.266666rem;
}
.search-history ul li {
  margin: 0.266666rem;
  padding: 0.08rem 0.16rem;
  font-size: 0.373333rem;
  border: 1px solid #ccc;
}
</style>




